<template>
  <div class="app-container family-PingFangSC-Regular">
    <div class="margin-b color-999 font-s14">
      <el-button type="primary" @click="addBackground" class="margin-r">添加背景</el-button>
      建议邀请卡背景图尺寸为(640*824)
    </div>
    <div class="margin-b color-222 font-s14">背景图片({{this.tableData.length}}条)</div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%" v-loading="listLoading"
      :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
      class="table c-width100 color-222 family-PingFangSC-Regular font-s12">
      <el-table-column
        prop="date"
        label="背景图片"
      >
        <template slot-scope="scope">
          <div class="clearfix">
            <div class="fl"><img :src="scope.row.bgUrl" alt="" height="164px" width="128px"></div>
            <div class="fl margin-l">
              <div class="padding-tb20 color-222 font-s16">{{scope.row.desc}}</div>
              <div class="color-999 font-s14">排序：{{scope.row.sort}}</div>
              <div class="margin-t10 color-999 font-s14">卡片背景：{{scope.row.bgType==1?'背景图片偏暗色':'背景图片偏浅色'}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        align="center"
      width="150">
        <template slot-scope="scope">
          <b @click="toEdit(scope.row.ibId)">编辑</b><span class="color-409">|</span>
          <b @click="delInvite(scope.row.ibId)">删除</b>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getInviteCardList, toDelInvite } from '@/api/extra'
export default{
  components: {

  },
  created() {
    this.getCardList()
  },
  data() {
    return {
      isShowBackgroundDetail: false,
      tableData: [],
      listLoading: false
    }
  },
  methods: {
    delInvite(id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        toDelInvite(id).then(res => {
        // 正确回调
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getCardList()
        })
          .catch(err => {
            console.log(err)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getCardList() {
      this.listLoading = true
      getInviteCardList().then(res => {
        this.tableData = res.data.data
        this.listLoading = false
      })
        .catch(err => {
          console.log(err)
        })
    },
    addBackground() {
      if (this.tableData.length < 6) {
        this.$router.push({ name: 'addBackground' })
      } else {
        this.$message({
          type: 'info',
          message: '邀请卡背景图最多显示6图'
        })
      }
    },
    toEdit(id) {
      this.$router.push({ path: `/inviteCardLists/editBackground/${id}` })
    },
    closeBackgroundDetail(msg) {
      this.isShowBackgroundDetail = msg
    }
  }

}
</script>
<style scoped>
  .el-table thead {
    font-weight: 400;
    font-size:14px;
    color:#5c6065;
    font-family: PingFangSC-Semibold;
  }
</style>
